<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>合拍街</title>
    <link href="../css/style.css" rel="stylesheet" type="text/css"/>
    <link href="../iconfont/iconfont.css" rel="stylesheet" type="text/css"/>
</head>

<body>
<header id="header">
    <a href="user_index.html" class="iconfont fl">&#xe63f;返回</a>
    <div class="title">个人资料</div>
    <a href="#" class="iconfont fr">&#xe6a0;</a>
</header>
<div class="content user-content-info">
    <p>个人资料</p>
    <div class="ul-list">
        <ul>
            <li class="pic">
                <a class="arrow-right">头像
                    <span class="fr user-content-img"><img src="../images/user_mini.png"></span>
                </a>
            </li>
            <li>
                <p class="fl">昵称</p>
                <input type="text" class="fr" value="小娜"/>
            </li>
            <li class="arrow-right">
                <p class="fl arrow-right">性别</p>
                <input type="text" class="fr" value="女"/>
            </li>
            <li id="vocation_li" class="arrow-right">
                <p class="fl">身份</p>
                <input id="vocation_val" disabled type="text" class="fr vacation_text" value="摄影师"/>
            </li>
        </ul>
    </div>
    <div class="dialog vocation">
        <div class="dialog-card">
            <div class="dialog-select">
                <ul class="clearfix">
                    <li>
                        <input id="radio0" type="radio" name="vocation" value="暂不选"/>
                        <label for="radio0">暂不选</label>
                    </li>
                    <li>
                        <input id="radio1" type="radio" name="vocation" value="摄影师"/>
                        <label for="radio1">摄影师</label>
                    </li>
                    <li>
                        <input id="radio2" type="radio" name="vocation" value="模特"/>
                        <label for="radio2">模特</label>
                    </li>
                    <li>
                        <input id="radio3" type="radio" name="vocation" value="化妆师"/>
                        <label for="radio3">化妆师</label>
                    </li>
                    <li>
                        <input id="radio4" type="radio" name="vocation" value="修图师"/>
                        <label for="radio4">修图师</label>
                    </li>
                    <li>
                        <input id="radio5" type="radio" name="vocation" value="商家"/>
                        <label for="radio5">商家</label>
                    </li>
                    <li>
                        <input id="radio6" type="radio" name="vocation" value="经纪人"/>
                        <label for="radio6">经纪人</label>
                    </li>
                    <li>
                        <input id="radio7" type="radio" name="vocation" value="7"/>
                        <label for="radio7">摄影爱好者</label>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="dialog region">
        <div class="dialog-card">
            <div class="dialog-title">选择地区<span class="fr close"></span></div>
            <div class="dialog-select">
                <ul class="clearfix">
                    <li class="fl w33">
                        <a href="javascript:selectRegion('全部')">全部</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('北京')">北京</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('上海')">上海</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('杭州')">杭州</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('苏州')">苏州</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('南京')">南京</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('广州')">广州</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('西安')">西安</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('重庆')">重庆</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('深圳')">深圳</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('武汉')">武汉</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('青岛')">青岛</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('哈尔滨')">哈尔滨</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('福建')">福建</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('厦门')">厦门</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('香港')">香港</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('澳门')">澳门</a>
                    </li>
                    <li class="fl w33">
                        <a href="javascript:selectRegion('台湾')">台湾</a>
                    </li>
                </ul>
            </div>
            <div class="dialog-more">
                <a href="">更多地区
                    <i class="iconfont"></i>
                </a>
            </div>
        </div>
    </div>
    <p>位置</p>
    <div class="ul-list">
        <ul>
            <li id="region_li">
                <a href="#" class="arrow-right">所在地区
                    <label>[ 必填 ]</label>
                    <span id="region_val" class="fr region_local">上海</span>
                </a>
            </li>
        </ul>
    </div>
    <p>手机验证</p>
    <div class="ul-list">
        <ul>
            <li>
                <p class="fl">手机</p>
                <input type="text" class="fr" value="12321321321321"/>
            </li>
        </ul>
    </div>
    <p>联系方式</p>
    <div class="ul-list">
        <ul>
            <li>
                <p class="fl">QQ</p>
                <input type="text" class="fr" value="888888888"/>
            </li>
            <li>
                <p class="fl">微信</p>
                <input type="text" class="fr" value="099999999"/>
            </li>
        </ul>
    </div>
</div>

<footer id="footer" class="foot">
    <ul>
        <li>
            <a class="home" href="../index.html">
                <p>首页</p>
            </a>
        </li>
        <li>
            <a class="find" href="../find/index.html">
                <p>发现</p>
            </a>
        </li>
        <li>
            <a class="camera" href="../ranking/index.html">
                <p>合拍榜</p>
            </a>
        </li>
        <li class="active">
            <a class="person" href="user_login.html">
                <p>我的</p>
            </a>
        </li>
    </ul>
</footer>
<script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
<script>
    function selectRegion(place) {
        $("#region_val").html(place);
        $(".dialog").removeClass('dialog-show');
    }

    $(function () {
        var $vocation = $('#vocation_li');
        $vocation.on('click', function () {
            $(".vocation").toggleClass('dialog-show');
        });

        var $close = $(".close");
        $close.on('click', function () {
            $(".dialog").removeClass('dialog-show');
        });

        var $region = $('#region_li');
        $region.on('click', function () {
            $(".region").toggleClass('dialog-show');
        });
        $(":radio").click(function () {
            $("#vocation_val").val($(this).val());
            $(".dialog").removeClass('dialog-show');
        });

    })
</script>
</body>
</html>
